<!DOCTYPE html>
<html>
  <head>
    <title>Reading Features From CartoDB using GeoJSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="../lib/OpenLayers.js"></script>
  </head>
  <body>
    <h1 id="title">Reading Features From CartoDB using GeoJSON</h1>
    <div id="tags">
      protocol, script, cartodb
    </div>
    <p id="shortdesc">
      Demonstrates how to load features on OpenLayers using CartoDB SQL API.
    </p>
    <div id="map" class="smallmap"></div>
    <div id="docs">
      <p>
        <a href="http://cartodb.com/">CartoDB</a> is an Open Source
        Geopatial Database on the cloud. It allows you to import your
        data in shapefiles, KML, OpenStreeMap files, CSV, etc. and
        then analyze and visualize it. Internally CartoDB uses PostGIS
        2.0 so all functionality in PostGIS can be used straight
        away. CartoDB exposes two APIS. One
        to <a href="http://developers.cartodb.com/documentation/cartodb-apis.html#maps_api">generate maps</a> 
	as tiles with interactivity, and another <a href="http://developers.cartodb.com/documentation/cartodb-apis.html#sql_api">SQL API</a> 
	to retrieve vector data using among other formats, GeoJSON. In
        this example we do a very simple query to obtain all protected
        areas in Costa Rica from a public table. You can adapt the SQL
        to include where clauses or complicate geospatial queries.
      </p>
      <p>
        View the source code of this page to see how this is done. And
        check the table on CartoDB
        for <a href="https://examples.cartodb.com/tables/costa_rica_pa/public#/map">Protected Areas in Costa Rica</a>
      </p>
    </div>
    <script>
        var map = new OpenLayers.Map({
            div: "map",
            layers: [
                new OpenLayers.Layer.OSM(),
                new OpenLayers.Layer.Vector("Vectors", {
                    projection: new OpenLayers.Projection("EPSG:4326"),
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.Script({
                        url: "http://examples.cartodb.com/api/v2/sql",
                        params: {
			    q: "select * from costa_rica_pa LIMIT 50",
			    format: "geojson"
			},
                        format: new OpenLayers.Format.GeoJSON({
                            ignoreExtraDims: true
                        }),
                        callbackKey: "callback"
                    }),
                    eventListeners: {
                        "featuresadded": function() {
                            this.map.zoomToExtent(this.getDataExtent());
                        }
                    }
                })
            ]
        });
    </script>
  </body>
</html>
